.lottery_box {
  width: 100%;
  height: 100vh;
  position: relative;

  .bgi {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .lottery-grid {
    position: absolute;
    top: 183rpx;
    left: 421rpx;
    transform: translateX(-50%);
    width: 550rpx;
    height: 550rpx;
  }
}

.lottery-container {
  // padding: 30rpx;
  // background-color: #fff;
  min-height: 100vh;

  // 标题样式
  .lottery-title {
    font-size: 40rpx;
    font-weight: bold;
    text-align: center;
    color: #ff4500;
    margin-bottom: 20rpx;
  }

  // 抢红包机会样式
  .lottery-chance {
    text-align: center;
    font-size: 28rpx;
    color: #333;
    margin-bottom: 30rpx;
  }

  // 九宫格样式
  .lottery-grid {
    margin: 0 auto;
    //   background-color: #fe8848;
    border-radius: 20rpx;
    padding: 15rpx;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 15rpx;

    // 单个奖品格子
    .lottery-item {
      background-color: #fefbe6;
      border-radius: 10rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      overflow: hidden;

      &.active {
        background-color: #ff9d00;
        transform: scale(0.95);
      }

      // 奖品图片
      .prize-img {
        width: 100rpx;
        height: 100rpx;
        margin-bottom: 10rpx;
        background-color: #f5f5f5;
      }

      // 奖品名称
      .prize-name {
        font-size: 24rpx;
        color: #ff3c47;
        text-align: center;
      }

      // 开始按钮包装
      .start-btn-wrap {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #ff4500;
        position: relative;
        cursor: pointer;

        &::after {
          content: '';
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
          width: 0;
          height: 0;
          border-left: 120rpx solid transparent;
          border-right: 120rpx solid transparent;
          border-bottom: 60rpx solid #ff6600;
        }

        // 开始按钮文字
        .start-btn {
          color: #fff;
          font-size: 32rpx;
          font-weight: bold;
          z-index: 1;
          position: relative;
          top: -10rpx;
        }
      }
    }
  }

  // 规则样式
  .lottery-rules {
    margin-top: 40rpx;
    padding: 30rpx 0;

    .rules-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
    }

    .rules-content {
      .rule-item {
        font-size: 26rpx;
        color: #666;
        line-height: 1.8;
      }
    }
  }

  // 中奖弹窗
  .prize-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;

    .popup-content {
      width: 500rpx;
      background-color: #fff;
      border-radius: 20rpx;
      padding: 40rpx;
      display: flex;
      flex-direction: column;
      align-items: center;

      .popup-title {
        font-size: 32rpx;
        color: #333;
        margin-bottom: 20rpx;
      }

      .popup-prize {
        font-size: 40rpx;
        font-weight: bold;
        color: #ff6600;
        margin-bottom: 30rpx;
      }

      .popup-img {
        width: 200rpx;
        height: 200rpx;
        margin-bottom: 30rpx;
        background-color: #f0f0f0;
      }

      .popup-btn {
        width: 200rpx;
        height: 80rpx;
        background-color: #ff6600;
        color: #fff;
        border-radius: 40rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
      }
    }
  }
}

.zhuanpan {
  width: 460rpx;
  height: 460rpx;
  position: relative;
  border-radius: 50%;
  box-shadow: inset 0 0 20rpx rgba(#fff, 0.15);
  box-sizing: border-box;
  padding: 44rpx;
  .point {
    position: absolute;
    top: 12rpx;
    bottom: 12rpx;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    &::before,
    &::after {
      content: '';
      width: 12rpx;
      height: 12rpx;
      box-shadow: 0 0 10rpx #fffa65;
      border-radius: 50%;
      display: block;
    }
  }
  @for $i from 1 through 8 {
    .point:nth-child(#{$i}) {
      transform: translateX(-50%) rotate($i * 20deg);
    }
  }
  .content {
    z-index: 2;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fcecb2;
    border-radius: 50%;
    overflow: hidden;
    .item {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 50%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      transform-origin: 50% 100%;
      .img {
        margin-top: 24rpx;
        line-height: 1;
        image {
          width: 40rpx;
          height: 40rpx;
        }
      }
      .name {
        text-align: center;
        font-size: 24rpx;
        margin-top: 12rpx;
        font-weight: bold;
        color: #914401;
        width: 100rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        // white-space: nowrap;
        // overflow: hidden;
        // text-overflow: ellipsis;
      }
    }
  }
  .arrow {
    width: 30rpx;
    height: 30rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffea00;
    font-weight: bold;
    font-size: 40rpx;
    background: linear-gradient(to top, #7438ff, #a869ff);
    border: 8rpx solid #6932e3;
    border-radius: 50%;
    box-shadow: inset 0 0 20rpx rgba(#fff, 0.3);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 3;
    &::after {
      content: '';
      border-bottom: 38rpx solid #6932e3;
      border-left: 10rpx solid transparent;
      border-right: 10rpx solid transparent;
      position: absolute;
      left: 50%;
      top: -38rpx;
      transform: translateX(-50%);
      margin: auto;
    }
  }
}
.topriqi {
  position: absolute;
  left: 172rpx;
  top: 100rpx;
  opacity: 1;

  font-family: Source Han Sans;
  font-size: 25rpx;
  font-weight: bold;
  letter-spacing: 0px;

  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  background: linear-gradient(90deg, #f75e4e 0%, #a61512 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.topprice {
  position: absolute;
  left: 43rpx;
  top: 175rpx;
  opacity: 1;

  font-family: Source Han Sans;
  font-size: 33rpx;
  font-weight: bold;
  letter-spacing: 0px;

  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #f86148;
}
.toppricenum {
  position: absolute;
  left: 85rpx;
  top: 150rpx;
  opacity: 1;

  font-family: Source Han Sans;
  font-size: 61rpx;
  font-weight: bold;
  letter-spacing: 0px;

  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #f86148;
}
.cjbtn {
  position: absolute;
  left: 180rpx;
  top: 785rpx;
  width: 400rpx;
  height: 100rpx;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Source Han Sans;
  font-size: 29rpx;
  font-weight: bold;
  letter-spacing: 0px;

  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  background: linear-gradient(90deg, #f75e4e 0%, #a61512 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  .cjtext {
    width: 100%;
    height: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .cjsettime {
    width: 100%;
    height: 100rpx;
    text-align: center;
    .settime {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      color: #fa5151;
      .bell {
        width: 25rpx;
        height: 25rpx;
        margin-right: 5rpx;
      }
    }
  }
}

.textzj {
  position: absolute;
  left: 275rpx;
  top: 928rpx;
  width: 400rpx;
  height: 100rpx;
  opacity: 1;

  font-family: Source Han Sans;
  font-size: 33rpx;
  font-weight: 500;
  letter-spacing: 0px;

  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #ffffff;
}
.textwq {
  position: absolute;
  right: 38rpx;
  top: 989rpx;
  opacity: 1;
  display: flex;
  align-items: center;

  font-family: Source Han Sans;
  font-size: 24rpx;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0px;

  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #3d3d3d;
}
.jt {
  width: 12rpx;
  height: 12rpx;
  border-top: 4rpx solid #000;
  border-right: 4rpx solid #000;
  transform: rotate(45deg);
  margin-left: 5rpx;
}
.mingdan {
  position: absolute;
  top: 1035rpx;
  width: 90%;
  padding: 20rpx 5%;
  height: 200rpx;
}
.scroll-container {
  position: relative;
  height: 90px; /* 显示三条消息的高度，可根据实际情况调整 */
  overflow: hidden;
}

.scroll-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: transform 0.2s linear;
}

.message {
  height: 30px;
  line-height: 30px;
  opacity: 0;
  animation: fadeInOut 3s linear infinite;
}

@keyframes fadeInOut {
  0%,
  100% {
    opacity: 0;
  }
  20%,
  80% {
    opacity: 1;
  }
}
.swiper-item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 10rpx 0;
  font-size: 24rpx;
  .item {
    width: 90rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.my {
  position: absolute;
  right: 0rpx;
  top: 45rpx;
  width: 200rpx;
  height: 50rpx;
  font-weight: bold;
  opacity: 1;
  border-radius: 20rpx 0 0 20rpx;
  background-color: #fa7861;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btnwq {
  position: absolute;
  width: 120rpx;
  height: 40rpx;
  left: 480rpx;
  top: 94rpx;
  font-weight: bold;
  opacity: 1;
  border-radius: 10rpx;
  background: linear-gradient(270deg, #ea250d 0%, #ef6c1c 100%);
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  .pickercls {
    width: 120rpx;
    height: 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.option-box {
  width: 100%;
  height: 400rpx;
  z-index: 9999999;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 88rpx;
  padding: 0 30rpx;
  .cancel, .confirm {
    color: #3D3D3D;
    font-size: 28rpx;
    font-weight: 700;
  }
}

.picker {
  width: 100%;
  text-align: center;
  background-color: #fff;
  .picker-view {
    height: 242rpx;
    padding-bottom: 18rpx;
  }
}

.prize-item-name {
  line-height: 34px;
}
